<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'Echarts3DBar',
  setup() {
    const chartContainer = ref<HTMLDivElement | null>(null)
    let myChart: echarts.ECharts | null = null

    // 数据定义
    const dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    const data = [4200, 3700, 4800, 4200, 2700, 2300, 3000, 2700, 3700, 4700, 4200, 3500]
    const yMax = 5000
    const dataShadow = []
    
    for (let i = 0; i < data.length; i++) {
      dataShadow.push(yMax)
    }

    const initChart = () => {
      if (chartContainer.value) {
        // 初始化图表
        myChart = echarts.init(chartContainer.value)
        
        // 配置项（重点修改颜色渐变）
        const option = {
          grid: {
            left: '15%',
            right: '15%',
            top: '20%',
            bottom: '20%',
            containLabel: true
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              inside: false,
              color: '#fff',
              fontSize: 14,
              rotate: 0
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 10
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#999',
              fontSize: 14
            }
          },
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: '40%',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.3)'
              },
              // 重点：修改为黄绿渐变（顶部黄色，底部绿色）
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#f5c86c' },  // 顶部：浅黄色
                  { offset: 0.5, color: '#c2e066' }, // 中间：黄绿色
                  { offset: 1, color: '#00b96b' }    // 底部：深绿色
                ])
              },
              // 鼠标悬停时的渐变（增强交互效果）
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#ffdd57' },  // 亮黄色
                    { offset: 0.7, color: '#9ccc65' }, // 中绿色
                    { offset: 1, color: '#2e7d32' }   // 暗绿色
                  ])
                }
              },
              data: data
            }
          ]
        }

        // 设置配置项
        myChart.setOption(option)

        // 保留原有点击事件
        const zoomSize = 6
        myChart.on('click', function (params: any) {
          console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
          myChart?.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue:
              dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
          })
        })
      }
    }

    // 组件挂载后初始化图表
    onMounted(() => {
      initChart()
      
      // 响应窗口大小变化
      window.addEventListener('resize', () => {
        if (myChart) {
          myChart.resize()
        }
      })
    })

    // 组件卸载前销毁图表
    onUnmounted(() => {
      if (myChart) {
        myChart.dispose()
      }
    })

    return {
      chartContainer
    }
  }
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-color: #0f1a20; /* 增加深色背景，增强渐变效果显示 */
}
</style>